<template>
    <div class="login-tabib">
        <div>
            <div class="text-center">
                <a class="logo" href="index.html">
                    <!-- <img class="img-fluid" src="@/assets/images/logo.png" alt="loogin page"> -->
                </a>
            </div>
            <div class="login-main">
                <form class="theme-form">
                    <!-- <h4>Sign in to account</h4>
                    <p>Enter your email & password to login </p> -->
                    <div class="form-group m-b-10">
                        <label class="col-form-label">账号</label>
                        <input class="form-control" type="email" placeholder="" v-model="account">
                    </div>
                    <div class="form-group m-b-10">
                        <label class="col-form-label">密码</label>
                        <div class="form-input position-relative">
                            <input class="form-control" type="password" placeholder="*********" v-model="password">
                            <div class="show-hide"><span class="show"></span></div>
                        </div>
                    </div>
                    <div class="error-tip" v-show="isShowErrorTip">
                        <span>请输入正确的账号及密码！</span>
                    </div>
                    <div class="form-group mb-0">
                        <!-- <div class="checkbox p-0">
                            <input id="checkbox1" type="checkbox">
                            <label class="text-muted" for="checkbox1">记住密码</label>
                        </div> -->
                        <!-- <a class="link text-primary" href="page-forgot-password.html">忘记密码?</a> -->
                        <div class="mt-3">
                            <a class="btn btn-primary w-100" @click="login">登录</a>
                        </div>
                    </div>
                    <!-- <p class="mt-4 mb-0">没有账号?
                        <a class="ms-2 text-primary text-center" href="page-register.html">
                            创建账号
                        </a>
                    </p> -->
                </form>
            </div>
            <div class="tour-block">
                <el-button class="tour" @click="loginByTour" round>游客登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getAllUser } from '@/api/api.js'
export default {
    name: "page-login",
    data() {
        return {
            account : '',
            password : '',
            isShowErrorTip : false,
            users: []
        }
    },
    computed:{
        ...mapState('user',['user']),
    },
    methods:{
        ...mapActions('user',['setUser']),
        // 游客登录
        loginByTour() {
            sessionStorage.setItem('pemission', false)
            // 经理视角
            this.loginSuccess({"account":"Mary","password":"mary","identity":"0"})
        },
        //登录验证
        login(){
            for(let obj of this.users) {
                if(obj.account == this.account && this.password == obj.password) {
                    sessionStorage.setItem('pemission', true)
                    this.loginSuccess(obj)
                    return
                }
            }
            this.loginError()
        },
        //登录成功
        loginSuccess(accObj) {
            this.setUser(accObj)
            sessionStorage.setItem('account',JSON.stringify(accObj))
            this.isShowErrorTip = false
            this.$message({
                message: '登录成功',
                type: 'success',
                center:true
            });
            this.$router.push(`/main`)
        },
        //登录失败
        loginError() {
            this.isShowErrorTip = true
            this.$message({
                message: '登录失败',
                type: 'error',
                center: true
            });
        },
    },
    created() {
        this.isShowErrorTip = false
        getAllUser().then(response => {
            console.log(response.data)
            this.users = response.data
        }).catch(err => {
            console.log('账号验证出错！')
        }) 
    }
}
</script>

<style src="@/assets/css/style.css" scoped></style>
<style lang="less" scoped>
.login-tabib{
    background-image: url('~@/assets/images/背景.jpg');
}
.login-tabib{
    .login-main{
        .theme-form{
            .form-group.m-b-10{
                label{
                    display: block;
                }
                input{
                    width: 100%;
                }
            }
            .form-group.mb-0{
                .mt-3{
                    width: 100%;
                    margin-top: 40px;
                    a{
                        width: 100%;
                        box-sizing: border-box;
                    }
                }
            }
            .error-tip{
                color: red;
            }
        }
    }
}
.tour-block{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    .tour{
        background-color: transparent;
        border-color: #409CEF;
        opacity: 0.8;
        &:hover{
            background-color: #409CEF;
        }
    }
}
</style>